<template>
  <div id="layout">
    <Layout>
        <Header class="v-header">
            <img src="../assets/logo.png" alt="瑞为智慧门店" width="186" height="45" class="fl">
            <span class="v-logo-txt fl">客流数据分析</span>
            <div class="fr">
              <Select v-if="isAge" v-model="modelAge" class="mr10 v-age-select fl mt14" @on-change="GetParams(6, $event)" placeholder="请选择年龄分组">
                <Option :value="item.Id" v-for="(item, index) in agegroup" :key="index" :label="`年龄分组${index + 1} ${item.age1}、${item.age2}、${item.age3}、${item.age4}、${item.age5}`">
                </Option>
              </Select>
              <ButtonGroup class="mr10 fl mt14">
                  <Button v-if="isAll" :type="active === 0 ? 'primary' : 'ghost'" @click="GetParams(0)">总量</Button>
                  <Button v-if="isPreBtn" :type="active === 1 ? 'primary' : 'ghost'" @click="GetParams(1)">今天</Button>
                  <Button v-if="isPreBtn" :type="active === 2 ? 'primary' : 'ghost'" @click="GetParams(2)">昨天</Button>
                  <Button v-if="isNexBtn" :type="active === 3 ? 'primary' : 'ghost'" @click="GetParams(3)">过去7天</Button>
                  <Button v-if="isNexBtn" :type="active === 4 ? 'primary' : 'ghost'" @click="GetParams(4)">过去30天</Button>
                  <Button v-if="isPreWeek" :type="active === 7 ? 'primary' : 'ghost'" @click="GetParams(7)">上周</Button>
              </ButtonGroup>
              <el-date-picker
                v-if="isDay30"
                v-model="value31"
                unlink-panels
                type="daterange"
                size="mini"
                align="right"
                :clearable="false"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="GetParams(5, $event)">
              </el-date-picker>
              <el-date-picker
                v-if="isDay7"
                v-model="valueWeek"
                type="week"
                format="yyyy 第 WW 周"
                placeholder="选择周"
                size="mini"
                align="right"
                :clearable="false"
                :picker-options="pickerOptions"
                @change="GetParams(5, $event)">
              </el-date-picker>
              <el-date-picker
                v-if="isCurMonth"
                v-model="valueCurMonth"
                unlink-panels
                type="daterange"
                size="mini"
                align="right"
                :clearable="false"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="GetParams(8, $event)">
              </el-date-picker>
              <span class="v-user-name">{{ userName }}</span>
              <span class="v-login-out" @click="LoginOut">注销</span>
            </div>
        </Header>
          <Layout>
            <Sider id="v-sideBar" ref="side" hide-trigger collapsible :collapsed-width="0" v-model="isCollapsed" style="text-align: left; overflow: hidden;" width="300">
              <Menu :active-name="$route.name" theme="dark" width="300px" @on-select="ToLink">
                <MenuItem name="home">
                  <span>01 <b></b> <i>首页</i></span>
                </MenuItem>
                <MenuItem name="top10">
                  <span>02 <b></b> <i>Top10门店</i></span>
                </MenuItem>
                <MenuItem name="sexAgeRatio">
                  <span>03 <b></b> <i>年龄性别分布</i></span>
                </MenuItem>
                <MenuItem name="storeSexRatio">
                  <span>04 <b></b> <i>到店性别比例</i></span>
                </MenuItem>
                <MenuItem name="storeAge">
                  <span>05 <b></b> <i>到店年龄比例</i></span>
                </MenuItem>
                <MenuItem name="rushHour">
                  <span>06 <b></b> <i>客流高峰期</i></span>
                </MenuItem>
                <MenuItem name="storeRushHour">
                  <span>07 <b></b> <i>日客流高峰期</i></span>
                </MenuItem>
                <MenuItem name="storePassengerFlow">
                  <span>08 <b></b> <i>日均客流</i></span>
                </MenuItem>
                <MenuItem name="storeWeek">
                  <span>09 <b></b> <i>周末客流量占比</i></span>
                </MenuItem>
                <MenuItem name="allRatio">
                  <span>10 <b></b> <i>成交量总比</i></span>
                </MenuItem>
                <MenuItem name="allSexRatio">
                  <span>11 <b></b> <i>男女成交量总比</i></span>
                </MenuItem>
                <MenuItem name="allAgeRatio">
                  <span>12 <b></b> <i>年龄层成交量总比</i></span>
                </MenuItem>
                <MenuItem name="allRatioWeek">
                  <span>13 <b></b> <i>周末成交量总比</i></span>
                </MenuItem>
                <MenuItem name="volumeWeekDayReport">
                  <span>14 <b></b> <i>周天客流比与成交比</i></span>
                </MenuItem>
              </Menu>
            </Sider>
            <div @click="collapsedSider" class="v-menu-arrow">
              <Icon :type="iconType" size="5" color="#fff"></Icon>
            </div>
            <Content id="v-content">
              <div :style="{'min-height': minHeight + 'px', position: 'relative'}">
                <router-view />
                <Spin size="large" fix v-if="spinShow"></Spin>
              </div>
              <Footer class="v-footer">版权所有：厦门瑞为信息技术有限公司；数据来源：店客云及 <a target="_blank" @click="DownLink">下载数据</a></Footer>
            </Content>
        </Layout>
      </Layout>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "layout",
  props: {
  },
  data () {
    return {
      valueWeek: '',
      value31: '',
      valueCurMonth: '',
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      active: 0,
      isCollapsed: false,
      isAll: true,
      isPreBtn: true,
      isNexBtn: true,
      isPreWeek: false,
      isAge: false,
      isDay30: false,
      isDay7: false,
      isCurMonth: false,
      options: {
        disabledDate: date => {
          return date && (date.valueOf() < Date.now() - 3600 * 1000 * 24 * 29) || (date.valueOf() > Date.now())
        }
      },
      options7: {
        disabledDate: date => {
          return date && (date.valueOf() < Date.now() - 3600 * 1000 * 24 * 7) || (date.valueOf() > Date.now())
        }
      },
      optionsCurMonth: {
        disabledDate: date => {
          const myDate = new Date()
          const day = myDate.getDate()
          return date && date.valueOf() < Date.now() - day * 3600 * 1000 * 24 * 1 || (date.valueOf() > Date.now())
        }
      },
      linkPre: '',
      downLink: '',
      minHeight: 0,
      userName: '',
      modelAge: null,
      agegroup: []
    }
  },
  computed: {
    iconType () {
      return this.isCollapsed ? 'arrow-right-b' : 'arrow-left-b'
    },
    ...mapState({
      getDownLink: state => state.downLink,
      getAjaxParams: state => state.timeParams,
      spinShow: state => state.spinShow
    })
  },
  watch:{
    getAjaxParams (val) {
      // this.$store.dispatch('SetDownLink', val)
    },
    getAjaxParamsArea (val) {
      this.areaParams = val
    },
    getDownLink (val) {
      if (JSON.stringify(val) === '{}') {
        this.downLink = this.linkPre
      } else {
        this.downLink = this.linkPre + '?' + this.urlencode(val)
      }
    },
    $route(to) {
      this.GetRoute(to.name)
    }
  },
  mounted() {
    let allHeight = document.documentElement.clientHeight
    this.minHeight = allHeight - 210
    window.onresize = () => {
      let allHeight = document.documentElement.clientHeight
      this.minHeight = allHeight - 210
    }
  },
  created() {
    this.userName = window.localStorage.getItem('token')
    this.GetRoute(this.$route.name)
  },
  methods: {
  	GetRoute (name) {
      switch (name) {
          case 'home':
            this.isAge = false
            this.isAll = false
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 1
            this.GetParams(1)
            this.linkPre = '/report/exportPassengerData'
            break
          case 'top10':
            this.isAge = false
            this.isAll = false
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 1
            this.GetParams(1)
            this.linkPre = '/report/exportPassengerData'
            break
          case 'sexAgeRatio':
            this.isAge = false
            this.isAll = true
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 0
            this.GetParams(0)
            this.$store.dispatch('Agegroup').then((res) => {
              if (res.success === '1') {
                this.agegroup = res.data
                this.modelAge = this.agegroup[0].Id
                this.$store.dispatch('SelectAge', this.modelAge)
                this.$store.dispatch('CurAgeGroup', this.agegroup[0])
              }
            })
            this.linkPre = '/report/exportAgeSexualStoreData'
            break
          case 'storeSexRatio':
            this.isAge = false
            this.isAll = true
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 0
            this.GetParams(0)
            this.linkPre = '/report/exportSexualDate'
            break
          case 'storeAge':
            this.isAge = false
            this.isAll = true
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 0
            this.GetParams(0)
            this.$store.dispatch('Agegroup').then((res) => {
              if (res.success === '1') {
                this.agegroup = res.data
                this.modelAge = this.agegroup[0].Id
                this.$store.dispatch('SelectAge', this.modelAge)
                this.$store.dispatch('CurAgeGroup', this.agegroup[0])
              }
            })
            this.linkPre = '/report/exportSexualDate'
            break
          case 'rushHour':
            this.isAge = false
            this.isAll = false
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 1
            this.GetParams(1)
            this.linkPre = '/report/exportWeekPeakPeriodData'
            break
          case 'storeRushHour':
            this.isAge = false
            this.isAll = true
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 0
            this.GetParams(0)
            this.linkPre = '/report/exportDayPeakPeriodDatae'
            break
          case 'storePassengerFlow':
            this.isAge = false
            this.isAll = true
            this.isPreBtn = true
            this.isNexBtn = true
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = true
            this.isCurMonth = false
            this.active = 0
            this.GetParams(0)
            this.linkPre = '/report/dayExport'
            break
          case 'storeWeek':  // 页面9
            this.isAge = false
            this.isAll = false
            this.isPreBtn = false
            this.isNexBtn = false
            this.isPreWeek = true
            this.isDay7 = true
            this.isDay30 = false
            this.isCurMonth = false
            this.active = 7
            this.GetParams(7)
            this.linkPre = '/report/weeksExport'
            break
          case 'allRatio':
            this.isAge = false
            this.isAll = false
            this.isPreBtn = true
            this.isNexBtn = false
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = false
            this.isCurMonth = true
            this.active = 1
            this.GetParams(1)
            this.linkPre = '/strikeExport/volumeExport'
            break
          case 'allSexRatio':
            this.isAge = false
            this.isAll = false
            this.isPreBtn = true
            this.isNexBtn = false
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = false
            this.isCurMonth = true
            this.active = 1
            this.GetParams(1)
            this.linkPre = '/strikeExport/volumeSexExport'
            break
          case 'allAgeRatio':
            this.isAge = true
            this.isAll = false
            this.isPreBtn = true
            this.isNexBtn = false
            this.isPreWeek = false
            this.isDay7 = false
            this.isDay30 = false
            this.isCurMonth = true
            this.active = 1
            this.GetParams(1)
            this.$store.dispatch('Agegroup').then((res) => {
              if (res.success === '1') {
                this.agegroup = res.data
                this.modelAge = this.agegroup[0].Id
                this.$store.dispatch('SelectAge', this.modelAge)
                this.$store.dispatch('CurAgeGroup', this.agegroup[0])
              }
            })
            this.linkPre = '/strikeExport/volumeAgeExport'
            break
          case 'allRatioWeek':
            this.isAge = false
            this.isAll = false
            this.isPreBtn = false
            this.isNexBtn = false
            this.isPreWeek = true
            this.isDay7 = true
            this.isDay30 = false
            this.isCurMonth = false
            this.active = 7
            this.GetParams(7)
            this.linkPre = '/strikeExport/volumeWeekExport'
            break
          case 'volumeWeekDayReport':
            this.isAge = false
            this.isAll = false
            this.isPreBtn = false
            this.isNexBtn = false
            this.isPreWeek = true
            this.isDay7 = true
            this.isDay30 = false
            this.isCurMonth = false
            this.active = 7
            this.GetParams(7)
            this.linkPre = '/strikeExport/volumeWeekDayExport'
            break
          default:
        }
    },
    urlencode (data){  
      var _result = []
      for (var key in data){
        var value = data[key]
        if (value.constructor == Array){
          value.forEach(function(_value){
            _result.push(key + '=' + _value)
          })
        }else{
          _result.push(key + '=' + value)
        }
      }
      return _result.join('&')
    },
    DownLink () {
      console.log(this.downLink)
      window.open(this.downLink)
    },
    collapsedSider () {
      this.$refs.side.toggleCollapse()
      this.$store.dispatch('SetSideBarWidth', this.isCollapsed)
    },
    ToLink (name) {
      this.active = 0
      this.$router.push({name: name})
    },
    GetParams (type, date) {
      switch (type) {
        case 0: // 总量
          this.active = type
          this.valueWeek = ''
          this.value31 = ''
          this.valueCurMonth = ''
          this.$store.dispatch('SetTimeParams', {})
          break
        case 1:  // 今天
          this.active = type
          this.valueWeek = ''
          this.value31 = ''
          this.valueCurMonth = ''
          let today = new Date()
          today.setTime(today.getTime())
          let month = today.getMonth() + 1
          month = month < 10 ? '0' + month : month
          let dateDay = today.getDate()
          dateDay = dateDay < 10 ? '0' + dateDay : dateDay
          let todayFormat = today.getFullYear() + '-' + month + '-' + dateDay
          this.$store.dispatch('SetTimeParams', {
            exactDate: todayFormat
          })
          break
        case 2:  // 昨天
          this.active = type
          this.valueWeek = ''
          this.value31 = ''
          this.valueCurMonth = ''
          let lastday = new Date()
          lastday.setTime(lastday.getTime() - 24*60*60*1000)
          let monthY = lastday.getMonth() + 1
          monthY = monthY < 10 ? '0' + monthY : monthY
          let dayY = lastday.getDate()
          dayY = dayY < 10 ? '0' + dayY : dayY
          let lastdayFormat = lastday.getFullYear() + '-' + monthY + '-' + dayY
          this.$store.dispatch('SetTimeParams', {
            exactDate: lastdayFormat
          })
          break
        case 3:  // 过去7天
          this.active = type
          this.valueWeek = ''
          this.value31 = ''
          this.valueCurMonth = ''
          this.$store.dispatch('SetTimeParams', {
            dateNum: 7
          })
          break
        case 4:  // 过去30天
          this.active = type
          this.valueWeek = ''
          this.value31 = ''
          this.valueCurMonth = ''
          this.$store.dispatch('SetTimeParams', {
            dateNum: 30
          })
          break
        case 5:  // 日期区间
          this.active = type
          if (date instanceof Array) {
            if (this.getDaysByDateString(this.DateFormat(date[0]), this.DateFormat(date[1])) > 31) {
              this.$Message.warning({
                content: '最大时间跨度为31天！',
                duration: 3
              })
              this.value31 = ''
            } else {
              this.$store.dispatch('SetTimeParams', {
                startDate: this.DateFormat(date[0]),
                endDate: this.DateFormat(date[1])
              })
            }
          } else {
            let _startWeek = (this.getFirstDayOfWeek(date)).getTime()
            let _endWeek = (this.getFirstDayOfWeek(date)).getTime() + 3600 * 1000 * 24 * 6
            this.$store.dispatch('SetTimeParams', {
              startDate: this.DateFormat(new Date(_startWeek)),
              endDate: this.DateFormat(new Date(_endWeek))
            })
          }
          break
        case 6:  // 年龄分组
          this.$store.dispatch('SelectAge', date)
          this.agegroup.map((item) => {
            if (date === item.Id) {
              this.$store.dispatch('CurAgeGroup', item)
            }
          })
          break
        case 7:  // 上周
          this.active = type
          this.valueWeek = ''
          this.value31 = ''
          this.valueCurMonth = ''
          let _start = (this.getFirstDayOfWeek(new Date())).getTime() - 3600 * 1000 * 24 * 7
          let _end = (this.getFirstDayOfWeek(new Date())).getTime() - 3600 * 1000 * 24 * 1
          this.$store.dispatch('SetTimeParams', {
            startDate: this.DateFormat(new Date(_start)),
            endDate: this.DateFormat(new Date(_end))
          })
          break
        case 8:  // 本月
          this.active = type
          if (date[0].getMonth() !== date[1].getMonth()) {
            this.$Message.warning({
              content: '不支持跨月查询',
              duration: 3
            })
            this.valueCurMonth = ''
          } else {
            this.$store.dispatch('SetTimeParams', {
              startDate: this.DateFormat(date[0]),
              endDate: this.DateFormat(date[1])
            })
          }
          break
        default:
      }
    },
    LoginOut () {
      window.localStorage.removeItem('token')
      this.$store.dispatch('Logout').then((res) => {
        if (res.success === '1') {
          this.$router.push({ name: 'login' })
        }
      })
    },
    getFirstDayOfWeek (date) {
      let day = date.getDay() || 7
      return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1 - day)
    },
    DateFormat (date) {
      let all = date
      let year = all.getFullYear()
      let month = all.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let day = all.getDate()
      day = day < 10 ? '0' + day : day
      return [year, month, day].join('-')
    },
    getDaysByDateString (dateString1, dateString2) {
      let startDate = Date.parse(dateString1.replace('/-/g','/'))
      let endDate = Date.parse(dateString2.replace('/-/g','/'))
      let diffDate = (endDate - startDate) + 1 * 24 * 60 * 60 * 1000
      let days = diffDate / (1 * 24 * 60 * 60 * 1000)
      return  days
    }
  }
}
</script>

<style lang="less">
.el-input__inner {
  background-color: #1d2437;
}
.el-range-editor--mini .el-range-input {
  background-color: #1d2437;
}
.el-date-editor .el-range-separator,
.el-range-editor--mini .el-range-input {
  color: #9db3cc;
}
.el-range-editor--mini .el-range-separator {
  line-height: 26px;
}
#layout {
  min-width: 1540px;
  .mt14 {
    margin-top: 14px;
  }
  .ivu-layout-header {
    background-color: #1d2437;
    padding: 0 15px;
  }
  .ivu-menu-dark,
  .ivu-layout-sider-children{
    background-color: #1d2437;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .ivu-layout-footer {
    color: #999;
    background-color: #ebf2ff;
  }
  .ivu-menu-item span {
    font-size: 16px;
  }
  .ivu-menu-item a {
  }
  i {
    font-style: normal;
  }
  .ivu-menu-vertical
  .ivu-menu-item,
  .ivu-menu-vertical
  .ivu-menu-submenu-title {
    height: 70px;
    line-height: 70px;
    padding: 0 22px;
  }
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu)
  i,
  .ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu-title-active:not(.ivu-menu-submenu)
  i {
    font-style: normal;
    font-size: 20px;
  }
  .ivu-menu-dark.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu)
    b,
  .ivu-menu-dark.ivu-menu-vertical
    .ivu-menu-submenu-title-active:not(.ivu-menu-submenu)
    b {
    position: relative;
    top: -5px;
    display: inline-block;
    width: 26px;
    font-size: 0;
    border-top: 1px solid #2497fc;
    margin-right: 3px;
  }
}
#layout {
  font-family: "微软雅黑", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#layout .v-header {
  height: 68px;
  z-index: 9;
  img {
    display: block;
    margin-top: 8px;
  }
  .v-logo-txt {
    height: 21px;
    line-height: 18px;
    font-size: 21px;
    color: #e6e9ff;
    border-left: 1px solid #43537f;
    margin-left: 14px;
    padding-left: 14px;
    margin-top: 25px;
  }
  .ivu-btn-ghost{
    color: #9db3cc;
    border-color: #333f60;
  }
  .ivu-input,
  .ivu-select-selection,
  .el-input__inner {
    color: #9db3cc;
    border-color: #333f60;
    background-color: transparent;
  }
  .v-user-name {
    margin: 0 20px 0 60px;
    color: #9db3cc;
  }
  .v-login-out {
    color: #9db3cc;
    cursor: pointer;
  }
  .v-age-select {
    width: 300px;
    .ivu-select-dropdown {
      background-color: #1d2437;
      .ivu-select-item {
        color: #ddd;
      }
    }
    .ivu-select-item:hover {
      background-color: #363e4f;
    }
  }
}
.v-menu-arrow {
  width: 6px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: url("../assets/arrow_bg.png");
  margin-top: 350px;
  position: relative;
  z-index: 9;
}
#v-content {
  padding: 28px 28px 0;
  background-color: #ebf2ff;
}
#layout .v-footer {
  height: 114px;
  line-height: 66px;
  font-size: 12px;
  text-align: center;
}
.v-dropdown {
  margin-right: 20px;
  margin-top: 22px;
}
.ivu-checkbox-wrapper {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>
